<template>
    <div class="app-container">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
            <el-form-item label="题目" prop="topic">
                <el-input v-model="queryParams.topic" placeholder="请输入题目" clearable @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
        </el-form>
        <el-row :gutter="10" class="mb8">
            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
        <el-table v-loading="loading" :data="appraisalTopicList">
            <el-table-column label="序号" align="center" width="55" type="index" />
            <el-table-column label="测评名称" prop="appraisalName" min-width="250" :show-overflow-tooltip="true" />
            <el-table-column label="测评题数" align="center" prop="appraisalNumber" min-width="150"
                :show-overflow-tooltip="true" />
            <el-table-column label="答题时间" align="center" prop="answerTime" min-width="150"
                :show-overflow-tooltip="true" />
            <el-table-column label="指导语" align="center" prop="appraisalInstruction" min-width="150"
                :show-overflow-tooltip="true" />
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="80" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="text" @click="handleUpdate(scope.row)"
                        v-hasPermi="['business:evaluationBank:edit']">测评维护</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize" @pagination="getList" />
        <!-- 添加或修改评测题目对话框 -->
        <el-dialog title="测评维护" :visible.sync="open" width="90%" append-to-body>
            <div style="height: 75vh;">
                <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="测评题目" name="first">
                        <splitpanes class="default-theme">
                            <pane size="23">
                                <div class="divisor-list-container">
                                    <div v-for="(item, index) in DivisorList" :key="item.id" class="head-container">
                                        <div :class="{
                                            'divisor-item': true,
                                            'selectDivisor': selectIndex == index,
                                            'active': selectIndex == index
                                        }" @click="toggleDivisorSelection(index, item.id, item.divisorName)">
                                            {{ item.divisorName }}
                                        </div>
                                    </div>
                                </div>
                            </pane>
                            <pane size="77">
                                <el-table :data="TopicLists" style="width: 100%" height="55vh">
                                    <el-table-column type="expand">
                                        <template slot-scope="props">
                                            <div style="display: flex; flex-wrap: wrap; gap: 20px;padding-right: 5px;">
                                                <div v-for="(item, index) in props.row.appraisalAnswers" :key="index"
                                                    style="flex: 1 0 40%; min-width: 200px; border: 1px solid #e4e7ed; border-radius: 4px; padding: 12px; background-color: #f5f7fa;">
                                                    <div style="font-weight: bold;">答案：{{ item.answer }}</div>
                                                    <div style="color: #1890ff; font-weight: bold;">得分：{{ item.score }}
                                                    </div>
                                                </div>
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="序号" prop="topicSerial" min-width="55"
                                        :show-overflow-tooltip="true" />
                                    <el-table-column label="题目" prop="topic" min-width="350"
                                        :show-overflow-tooltip="true" />
                                    <el-table-column label="选择状态" prop="choiceStatus" min-width="100" align="center"
                                        :show-overflow-tooltip="true">
                                        <template v-slot="scope">
                                            <div v-if="scope.row.choiceStatus == 0">单选</div>
                                            <div v-if="scope.row.choiceStatus == 1">多选</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </pane>
                        </splitpanes>

                    </el-tab-pane>
                    <el-tab-pane label="测评因子评语" name="second" v-if="appraisalId != 2 && appraisalId != 7">
                        <splitpanes class="default-theme">
                            <pane size="23">
                                <div class="divisor-list-container">
                                    <div v-for="(item, index) in DivisorList" :key="item.id" class="head-container">
                                        <div :class="{
                                            'divisor-item': true,
                                            'selectDivisor': selectIndex == index,
                                            'active': selectIndex == index
                                        }" @click="toggleDivisorSelection(index, item.id, item.divisorName)">
                                            {{ item.divisorName }}
                                        </div>
                                    </div>
                                </div>
                            </pane>
                            <pane size="77">
                                <div class="dialog-footer" style="text-align: right;margin-bottom: 10px;">
                                    <el-button size="mini" @click="handleaddSuggest" type="primary"
                                        v-hasPermi="['business:appraisalTopicBank:add']">新增</el-button>
                                </div>
                                <el-table :data="suggestData" style="width: 100%" height="55vh">
                                    <el-table-column label="序号" align="center" width="55" type="index" />
                                    <el-table-column label="因子类型" v-if="appraisalId == 5 && selectName" align="center"
                                        prop="type" min-width="150" :show-overflow-tooltip="true" />
                                    <el-table-column label="最小值" v-if="appraisalId != 5" align="center" prop="minScore"
                                        min-width="150" :show-overflow-tooltip="true" />
                                    <el-table-column label="最大值" v-if="appraisalId != 5" align="center" prop="maxScore"
                                        min-width="150" :show-overflow-tooltip="true" />
                                    <el-table-column v-if="appraisalId == 9" label="性别" align="center" prop="gender"
                                        min-width="150" :show-overflow-tooltip="true">
                                        <template v-slot="scope">
                                            <div v-if="scope.row.gender == 0">男</div>
                                            <div v-if="scope.row.gender == 1">女</div>
                                            <div v-if="scope.row.gender == 2">未知</div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column v-if="appraisalId != 2 || appraisalId != 9 || appraisalId != 7"
                                        label="评语建议" prop="proposalSuggest" min-width="250"
                                        :show-overflow-tooltip="true">
                                        <template v-slot="scope">
                                            <div class="preview-text" @click="showDetail(scope.row.proposalSuggest)">
                                                {{ stripHtml(scope.row.proposalSuggest) }}
                                            </div>
                                        </template>
                                    </el-table-column>
                                    <el-table-column label="操作" align="center" class-name="small-padding fixed-width"
                                        width="120" fixed="right">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="text" @click="handleViewSuggest(scope.row)"
                                                v-hasPermi="['business:appraisalTopicBank:info']">详情</el-button>
                                            <el-button size="mini" type="text" @click="handleUpdateSuggest(scope.row)"
                                                v-hasPermi="['business:appraisalTopicBank:edit']">修改</el-button>
                                            <el-button size="mini" type="text" @click="handleDeleteSuggest(scope.row)"
                                                v-hasPermi="['business:appraisalTopicBank:del']">删除</el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </pane>
                        </splitpanes>
                    </el-tab-pane>
                    <el-tab-pane label="测评总分评语" name="third">
                        <div class="dialog-footer" style="text-align: right;margin-bottom: 10px;">
                            <el-button size="mini" @click="handleaddAllSuggest" type="primary"
                                v-hasPermi="['business:appraisalTopicAll:add']">新增</el-button>
                        </div>
                        <el-table :data="TotalsuggestData" style="width: 100%" height="55vh">
                            <el-table-column label="序号" align="center" width="55" type="index" />
                            <el-table-column v-if="appraisalId != 5" align="center" label="最小值" prop="totalMinScore"
                                min-width="150" :show-overflow-tooltip="true" />
                            <el-table-column v-if="appraisalId != 5" align="center" label="最大值" prop="totalMaxScore"
                                min-width="150" :show-overflow-tooltip="true" />
                            <el-table-column v-if="appraisalId == 5" align="center" label="组合代码" prop="totalMaxScore"
                                min-width="200" :show-overflow-tooltip="true" />
                            <el-table-column v-if="appraisalId == 8 || appraisalId == 9" align="center" label="因子最大值"
                                prop="divisorMaxScore" min-width="150" :show-overflow-tooltip="true" />
                            <el-table-column v-if="appraisalId == 8 || appraisalId == 9" align="center" label="因子最小值"
                                prop="divisorMinScore" min-width="150" :show-overflow-tooltip="true" />
                            <el-table-column label="评语建议" prop="proposalSuggest" min-width="250"
                                :show-overflow-tooltip="true">
                                <template v-slot="scope">
                                    <div class="preview-text" @click="showDetail(scope.row.proposalSuggest)">
                                        {{ stripHtml(scope.row.proposalSuggest) }}
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="预警状态" align="center" prop="appraisalAbnormalStatus" min-width="100"
                                :show-overflow-tooltip="true">
                                <template v-slot="scope">
                                    <el-tag :type="dictValueToTagType(scope.row.appraisalAbnormalStatus)">
                                        {{ getDictLabel('abnormalstatus', scope.row.appraisalAbnormalStatus)
                                        }}
                                    </el-tag>
                                </template>
                            </el-table-column>
                            <el-table-column label="操作" align="center" class-name="small-padding fixed-width"
                                width="120" fixed="right">
                                <template slot-scope="scope">
                                    <el-button size="mini" type="text" @click="handleViewSuggestAll(scope.row)"
                                        v-hasPermi="['business:appraisalTopicAll:info']">详情</el-button>
                                    <el-button size="mini" type="text" @click="handleUpdateSuggestAll(scope.row)"
                                        v-hasPermi="['business:appraisalTopicAll:edit']">修改</el-button>
                                    <el-button size="mini" type="text" @click="handleDeleteSuggestAll(scope.row)"
                                        v-hasPermi="['business:appraisalTopicAll:del']">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        <!-- <pagination v-show="totalAll > 0" :total="totalAll" :page.sync="queryParamsSuggestAll.pageNum"
                            :limit.sync="queryParamsSuggestAll.pageSize" @pagination="getTotalsuggestData" /> -->
                    </el-tab-pane>
                </el-tabs>
            </div>
        </el-dialog>

        <el-dialog :title="suggestTitle" :visible.sync="openSuggest" width="700px" append-to-body>
            <el-form ref="form" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="最小值" prop="minScore" v-if="appraisalId != 5">
                    <el-input-number :controls="false" v-model="form.minScore" :precision="2" :step="0.1"
                        :disabled="!disabledEdit" step-strictly></el-input-number>
                </el-form-item>
                <el-form-item label="最大值" prop="maxScore" v-if="appraisalId != 5">
                    <el-input-number :controls="false" v-model="form.maxScore" :precision="2" :step="0.1"
                        :disabled="!disabledEdit" step-strictly></el-input-number>
                </el-form-item>
                <el-form-item label="性别" prop="gender" v-if="appraisalId == 9">
                    <el-select v-model="form.gender" placeholder="请选择性别">
                        <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-if="appraisalId != 2 || appraisalId != 9 || appraisalId != 7" label="评语建议"
                    prop="proposalSuggest">
                    <editor v-model="form.proposalSuggest" :min-height="192" />
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="disabledEdit">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>


        <el-dialog :title="suggestAllTitle" :visible.sync="openAllSuggest" width="700px" append-to-body>
            <el-form ref="formAll" :model="formAll" :rules="rulesAll" label-width="100px">
                <el-form-item label="最小值" prop="totalMinScore" v-if="appraisalId != 5">
                    <el-input-number :controls="false" v-model="formAll.totalMinScore" :precision="2" :step="0.1"
                        :disabled="!disabledEditAll" step-strictly></el-input-number>
                </el-form-item>
                <el-form-item label="最大值" prop="totalMaxScore" v-if="appraisalId != 5">
                    <el-input-number :controls="false" v-model="formAll.totalMaxScore" :precision="2" :step="0.1"
                        :disabled="!disabledEditAll" step-strictly></el-input-number>
                </el-form-item>
                <el-form-item label="组合代码" prop="totalMaxScore" v-if="appraisalId == 5">
                    <el-input-number :controls="false" v-model="formAll.totalMaxScore" :precision="2" :step="0.1"
                        :disabled="!disabledEditAll" step-strictly></el-input-number>
                </el-form-item>
                <el-form-item label="因子最大值" prop="divisorMaxScore" v-if="appraisalId == 8 || appraisalId == 9">
                    <el-input-number :controls="false" v-model="formAll.divisorMaxScore" :precision="2" :step="0.1"
                        :disabled="!disabledEditAll" step-strictly></el-input-number>
                </el-form-item>
                <el-form-item label="因子最小值" prop="divisorMinScore" v-if="appraisalId == 8 || appraisalId == 9">
                    <el-input-number :controls="false" v-model="formAll.divisorMinScore" :precision="2" :step="0.1"
                        :disabled="!disabledEditAll" step-strictly></el-input-number>
                </el-form-item>
                <el-form-item label="预警状态" prop="appraisalAbnormalStatus">
                    <el-select v-model="formAll.appraisalAbnormalStatus" placeholder="请选择预警状态">
                        <el-option v-for="dict in dict.type.abnormalstatus" :key="dict.value" :label="dict.label"
                            :value="dict.value"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="评语建议" prop="proposalSuggest">
                    <editor v-model="formAll.proposalSuggest" :min-height="192" />
                    <!-- <el-input v-model="formAll.proposalSuggest" :rows="10" type="textarea"></el-input> -->
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" v-if="disabledEditAll">
                <el-button type="primary" @click="submitFormAll">确 定</el-button>
                <el-button @click="cancelAll">取 消</el-button>
            </div>
        </el-dialog>

        <!-- 在模板中添加弹窗 -->
        <el-dialog title="评语建议" :visible.sync="dialogVisible" width="70%">
            <div v-html="currentContent"></div>
        </el-dialog>
    </div>
</template>

<script>
import { getDivisorSuggest, TotalSuggest, addTotalSuggest, editTotalSuggest, delTotalSuggest, getTotalSuggest, SuggestLists, addSuggestLists, editSuggestLists, delSuggest, appraisalDivisorList, appraisalTopicLists, appraisalList } from "@/api/evaluation/appraisalTopic";
import { Splitpanes, Pane } from "splitpanes"
import "splitpanes/dist/splitpanes.css"

export default {
    name: "AppraisalTopic",
    dicts: ['abnormalstatus', 'sys_user_sex'],
    components: { Splitpanes, Pane },
    data() {
        return {
            appraisalAbnormalStatusList: [
                {
                    id: '0',
                    label: '正常'
                },
                {
                    id: '1',
                    label: '异常'
                }
            ],
            selectName: '',
            appraisalId: '',
            divisorIds: '',
            dialogVisible: false,
            currentContent: '',
            disabledEditAll: false,
            suggestAllTitle: '',
            formAll: {
                suggestType: 1
            },
            rulesAll: {
                appraisalAbnormalStatus: [
                    { required: true, message: "预警状态不能为空", trigger: "blur" }
                ],
                divisorMaxScore: [
                    { required: true, message: "因子最大值不能为空", trigger: "blur" }
                ],
                divisorMinScore: [
                    { required: true, message: "因子最小值不能为空", trigger: "blur" }
                ],
                totalMaxScore: [
                    { required: true, message: "最大值不能为空", trigger: "blur" }
                ],
                totalMinScore: [
                    { required: true, message: "最小值不能为空", trigger: "blur" }
                ],
                proposalSuggest: [
                    { required: true, message: "评语建议不能为空", trigger: "blur" }
                ]
            },
            openAllSuggest: false,
            totalAll: 0,
            queryParamsSuggestAll: {
                suggestType: 1
                // pageNum: 1,
                // pageSize: 10
            },
            queryParamsSuggest: {
                suggestType: 1
                // pageNum: 1,
                // pageSize: 10
            },
            totalSuggest: 0,
            disabledEdit: false,
            suggestTitle: '',
            openSuggest: false,
            TotalsuggestData: [],
            suggestData: [],
            activeName: 'first',
            selectIndex: -1,
            DivisorList: [],
            TopicLists: [],
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 显示搜索条件
            showSearch: true,
            // 总条数
            total: 0,
            // 评测题目表格数据
            appraisalTopicList: [],
            // 弹出层标题
            title: "",
            // 是否显示弹出层
            open: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                appraisalId: null,
                divisorId: null,
                topicSerial: null,
                topic: null,
                choiceStatus: null,
                suggestType: 1
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
                maxScore: [
                    { required: true, message: "最大值不能为空", trigger: "blur" }
                ],
                minScore: [
                    { required: true, message: "最小值不能为空", trigger: "blur" }
                ],
                proposalSuggest: [
                    { required: true, message: "评语建议不能为空", trigger: "blur" }
                ]
            }
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getDictLabel(dictType, value) {
            let type = ""
            this.dict.type.abnormalstatus.forEach(item => {
                if (item.value == value) {
                    type = item.label
                }
            })
            return type
        },
        dictValueToTagType(status) {
            let type = ""
            this.dict.type.abnormalstatus.forEach(item => {
                if (item.value == status) {
                    type = item.raw.listClass
                }
            })
            return type
        },
        toggleDivisorSelection(index, divisorId, name) {
            // 如果点击的是已选中的项目，则取消选择
            if (this.selectIndex == index) {
                this.selectIndex = -1;
                this.divisorIds = '';
            } else {
                this.selectIndex = index;
                this.divisorIds = divisorId;
                // if(name.indexOf('现实型'))
                if (name.includes("现实型")) {
                    this.selectName = '现实型（R）'
                } else if (name.includes("研究型")) {
                    this.selectName = '研究型（I）'
                }
                else if (name.includes("艺术型")) {
                    this.selectName = '艺术型（A）'
                }
                else if (name.includes("社会型")) {
                    this.selectName = '社会型（S）'
                }
                else if (name.includes("企业型")) {
                    this.selectName = '企业型（E）'
                } else {
                    this.selectName = '常规型（C）'
                }
            }

            // 根据当前标签页执行相应操作
            if (this.activeName == 'first') {
                this.getappraisalTopicLists();
            } else {
                this.getSuggestLists();
            }
        },
        stripHtml(html) {
            // 提取纯文本并截断
            const text = html.replace(/<[^>]*>/g, '');
            return text.length > 50 ? text.substring(0, 50) + '...' : text;
        },
        showDetail(content) {
            this.currentContent = content;
            this.dialogVisible = true;
        },
        handleViewSuggestAll(row) {
            this.resetAllSuggest()
            this.suggestAllTitle = '查看因子评语总分'
            this.disabledEditAll = false
            this.openAllSuggest = true
            this.SuggestDetailAll(row.id)
        },
        handleUpdateSuggestAll(row) {
            this.resetAllSuggest()
            this.disabledEditAll = true
            this.openAllSuggest = true
            this.suggestAllTitle = '修改因子评语总分'
            this.SuggestDetailAll(row.id)
        },
        SuggestDetailAll(id) {
            getTotalSuggest(id).then(res => {
                this.formAll = res.data
            })
        },
        handleDeleteSuggestAll(row) {
            this.$modal.confirm('是否确认删除测评因子总分数据项？').then(function () {
                return delTotalSuggest(row.id);
            }).then(() => {
                this.getTotalsuggestData()
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        submitFormAll() {
            this.$refs["formAll"].validate(valid => {
                if (valid) {
                    if (this.formAll.id != null) {
                        editTotalSuggest(this.formAll).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.openAllSuggest = false;
                            this.getTotalsuggestData()
                        });
                    } else {
                        addTotalSuggest(this.formAll).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.openAllSuggest = false;
                            this.getTotalsuggestData()
                        });
                    }
                }
            });
        },
        cancelAll() {
            this.openAllSuggest = false;
            this.resetAllSuggest();
        },
        handleaddAllSuggest() {
            this.resetAllSuggest()
            this.disabledEditAll = true
            this.openAllSuggest = true
            this.formAll.appraisalId = this.appraisalId
            this.suggestAllTitle = '新增评测总分'
        },
        resetAllSuggest() {
            this.formAll = {
                id: null,
                divisorMaxScore: null,
                divisorMinScore: null,
                totalMaxScore: null,
                totalMinScore: null,
                proposalSuggest: null,
                appraisalId: null,
                suggestType: 1
            };
            this.resetForm("formAll");
        },
        submitForm() {
            this.$refs["form"].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        editSuggestLists(this.form).then(response => {
                            this.$modal.msgSuccess("修改成功");
                            this.openSuggest = false;
                            this.getSuggestLists()
                        });
                    } else {
                        addSuggestLists(this.form).then(response => {
                            this.$modal.msgSuccess("新增成功");
                            this.openSuggest = false;
                            this.getSuggestLists()
                        });
                    }
                }
            });
        },
        handleClick(tab, event) {
            this.activeName = tab.name
            this.selectIndex = -1
            if (this.activeName == 'first') {
                this.getappraisalTopicLists()
            } else if (this.activeName == 'second') {
                this.getSuggestLists()
            } else {
                this.getTotalsuggestData()
            }
        },
        getTotalsuggestData() {
            this.queryParamsSuggestAll.appraisalId = this.appraisalId
            TotalSuggest(this.queryParamsSuggestAll).then(res => {
                this.TotalsuggestData = res.rows
                this.totalAll = res.total
            })
        },
        getSuggestLists() {
            this.suggestData = []
            this.queryParamsSuggest.appraisalDivisorId = this.divisorIds
            this.queryParamsSuggest.appraisalId = this.appraisalId
            this.queryParamsSuggest.suggestType = 1
            SuggestLists(this.queryParamsSuggest).then(res => {
                this.suggestData = res.rows
                this.suggestData.forEach(element => {
                    element.type = this.selectName
                });
                this.totalSuggest = res.total
            })
        },
        selectDivisorIndex(index, divisorId) {
            this.selectIndex = index
            this.divisorIds = divisorId
            if (this.activeName == 'first') {
                this.getappraisalTopicLists()
            } else {
                this.getSuggestLists()
            }
        },
        /** 查询评测题目列表 */
        getList() {
            this.loading = true;
            appraisalList(this.queryParams).then(response => {
                this.appraisalTopicList = response.rows;
                this.total = response.total;
                this.loading = false;
            });
        },
        handleaddSuggest() {
            this.reset()
            this.disabledEdit = true
            this.openSuggest = true;
            this.suggestTitle = '新增因子评语'
            this.form.appraisalId = this.appraisalId
            this.form.appraisalDivisorId = this.DivisorList[this.selectIndex].id
        },
        handleUpdateSuggest(row) {
            this.reset()
            this.disabledEdit = true
            this.suggestTitle = '修改因子评语'
            this.SuggestDetail(row.id)
        },
        SuggestDetail(id) {
            getDivisorSuggest(id).then(res => {
                this.form = res.data
                this.openSuggest = true;
            })
        },
        handleViewSuggest(row) {
            this.reset()
            this.suggestTitle = '查看因子评语'
            this.disabledEdit = false
            this.SuggestDetail(row.id)

        },
        handleDeleteSuggest(row) {
            this.$modal.confirm('是否确认删除测评因子数据项？').then(function () {
                return delSuggest(row.id);
            }).then(() => {
                this.getSuggestLists()
                this.$modal.msgSuccess("删除成功");
            }).catch(() => { });
        },
        // 取消按钮
        cancel() {
            this.openSuggest = false;
            this.reset();
        },
        // 表单重置
        reset() {
            this.form = {
                id: null,
                appraisalId: null,
                divisorId: null,
                topicSerial: null,
                minScore: null,
                proposalSuggest: null,
                maxScore: null,
                remark: null,
                sex: undefined,
                suggestType: 1
            };
            this.resetForm("form");
        },
        /** 搜索按钮操作 */
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        /** 重置按钮操作 */
        resetQuery() {
            this.resetForm("queryForm");
            this.handleQuery();
        },
        /** 新增按钮操作 */
        handleUpdate(row) {
            this.open = true;
            this.appraisalId = row.id
            this.divisorIds = ''
            this.selectIndex = -1
            this.activeName = 'first'
            appraisalDivisorList({
                appraisalId: this.appraisalId,
                suggestType: 1
            }).then(res => {
                this.DivisorList = res.rows
                this.getappraisalTopicLists()
            })
        },
        getappraisalTopicLists(divisorId) {
            appraisalTopicLists({
                appraisalId: this.appraisalId,
                divisorId: this.divisorIds,
                suggestType: 1
            }).then(res => {
                this.TopicLists = res.rows
            })
        }

    }
};
</script>
<style lang="scss" scoped>
// .pane {
//  display: flex;
//   flex-direction: column;
//   height: 100%; /* 确保父容器有高度 */
// }
.divisor-list-container {
    height: 65vh;
    overflow-y: auto;
    /* 垂直滚动 */
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    /* 可选边框 */
    margin: 4px;
    /* 外边距 */
}

.head-container {
    padding: 8px;
}

.divisor-item {
    padding-left: 10px;
    height: 32px;
    line-height: 32px;
    /* 每个列表项的内边距 */
    border-bottom: 1px solid #e0e0e0;
    /* 底部边框，模拟分隔线 */
    cursor: pointer;
    /* 鼠标悬停样式 */
    transition: background-color 0.3s ease;
    /* 背景颜色过渡效果 */
}

.divisor-item:last-child {
    border-bottom: none;
    /* 最后一个列表项去掉底部边框 */
}

.divisor-item:hover {
    background-color: #f5f5f5;
    /* 悬停时背景颜色 */
}

.selectDivisor {
    background-color: #e0f7fa;
    /* 选中状态背景颜色 */
    font-weight: bold;
    /* 选中状态文字加粗 */
    height: 32px;
    line-height: 32px;
    padding-left: 10px;
}

.active {
    box-shadow: inset 2px 0 0 green;
    /* 左侧绿色边框效果，可调整颜色和宽度 */
}
</style>
